<!DOCTYPE html>
<html>
  <head>
  	 <meta content="text/html;charset=UTF-8"/>
  	 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=no"/>
     <title>首页</title>
     <link href="plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> 
     <link href="plugin/dataTable/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
     <link href="css/common.css" rel="stylesheet"/>
     <!--[if lt IE 9]>
			<script src="plugin/bootstrap/js/html5shiv.min.js"></script>
			<script src="plugin/bootstrap/js/respond.min.js"></script>	
		 <![endif]-->
     <script src="plugin/jquery/jquery.min.js" type="text/javascript"></script>
	 	 <script src="plugin/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	 	 <script src="plugin/highcharts/highcharts.js" type="text/javascript"></script>
	 	 <script src="plugin/dataTable/js/jquery.dataTables.min.js" type="text/javascript"></script>
	 	 <script src="plugin/dataTable/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
  </head>
<body>
		<div class="container innerDiv" style="padding-bottom:50px;overflow:auto;">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="col-md-6">
						<div class="panel no-border w_100">
							<div class="panel-heading heading-blue">
								<h3 class="panel-title">
									服务请求汇总情况
								</h3>
							</div>
							<div class="panel-body body-blue w_100" style="height: 250px;">
								<div id="hzCharts" style="width: 100%;height: 100%;"></div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="panel no-border">
							<div class="panel-heading heading-blue">
								<h3 class="panel-title">
									服务请求汇总情况
								</h3>
							</div>
							<div class="panel-body body-blue" style="height: 250px;">
								<div id="ztCharts" style="width: 100%;height: 100%;"></div>
							</div>
						</div>
					</div>
					<div class="col-md-12">
						<table id="lateList" class="table table-striped table-hover table-blue" width="100%" >
							<thead>
								<tr>
									<td colspan="6">最近请求服务记录</td>
								</tr>
								<tr>
									<th>序号</th>
									<th>服务名称</th>
									<th>发起请求时间</th>
									<th>访问服务ID</th>
									<th>已用时</th>
									<th>请求状态</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
 		 _page_home={
 		 	/*data:[[${data}]],*/
 		 	/*获取最近运行列表*/
 			getlateList:function(){
 				var count=1;
 				var listData=[
 					{remoteAddress:'aaaa',accessTime:'2017-02-03 20:00',accessServiceId:'192.168.1.33',accessDuation:'2小时',accessStatus:'成功'},
 					{remoteAddress:'bbbb',accessTime:'2017-02-03 20:00',accessServiceId:'192.168.1.33',accessDuation:'2小时',accessStatus:'成功'},
 					{remoteAddress:'cccc',accessTime:'2017-02-03 20:00',accessServiceId:'192.168.1.33',accessDuation:'2小时',accessStatus:'成功'},
 					{remoteAddress:'dddd',accessTime:'2017-02-03 20:00',accessServiceId:'192.168.1.33',accessDuation:'2小时',accessStatus:'成功'},
 					{remoteAddress:'eeee',accessTime:'2017-02-03 20:00',accessServiceId:'192.168.1.33',accessDuation:'2小时',accessStatus:'成功'}
 				];
				$.extend( $.fn.dataTable.defaults, {
				    "searching": false,
				    "ordering": false,
				    "bLengthChange": false,
				    "paging":false,
				    "info":false
				});
				$('#lateList').dataTable({
					"data":listData,
					"rowId":'id',
// 					"scrollX":true,
					"columns": [{
						"data": function(){
							return count++
						}
					},{
						"class":"remoteAddress",
						"data": "remoteAddress"
					}, {
						"class":"accessTime",
						"data":"accessTime"
					}, {
						"class":"accessServiceId",
						"data": "accessServiceId"
					}, {
						"class":"accessDuation",
						"data": "accessDuation"
					}, {
						"class":"accessStatus",
						"data": "accessStatus"
					}]
				});
			},
		/* 获取请求汇总状态 */
		getHzCharts:function(){
			var hzCharts = {
					chart: {
						type: 'bar'
					},
					title: {
						text: null
					},
					subtitle: {
						text: null
					},
					xAxis: {
						categories: ['服务1','服务2','服务3','服务4','服务5'],
						crosshair: false
					},
					yAxis: {
						min: 0,
						title: {
							text: null
						}
					},
					tooltip: {
						headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
						pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
							'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
						footerFormat: '</table>',
						shared: true,
						useHTML: true
					},
					plotOptions: {
						column: {
							pointPadding: 0.2,
							borderWidth: 0
						}
					},
					credits: {
						enabled: false
					},

					series: [{
						name: '运行时间',
						data:  [120,100,110,130,105]
					}],
					legend: {
						enabled: false
					}
				};
				$('#hzCharts').highcharts(hzCharts);			
		},	
   		/* 获取状态汇总 */
			getZtCharts:function(){
						 $('#ztCharts').highcharts({
								chart: {
									plotBackgroundColor: null,
									plotBorderWidth: 0,
									plotShadow: false
								},
								title: {
									text: null,
									align: 'center',
									verticalAlign: 'middle',
									y: 50
								},
								tooltip: {
									pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b>'
								},
								plotOptions: {
									pie: {
										allowPointSelect: true,
										cursor: 'pointer',
										dataLabels: {
											enabled: true,
											style: {
												fontWeight: 'bold',
												color: '#777777'
											}
										}
									}
								},
								series: [{
									type: 'pie',
									name: '汇总情况',
									innerSize: '50%',
									data: [
										['处理中',10],
										['人工停止',15],
										['异常访问',5],
										['禁止访问',10],
										['已完成',60]
									]
								}],
								credits: {
									enabled: false
								}
						 });
			}	 
 		 };
		$(function(){
				/*获取最近运行列表*/
			_page_home.getlateList();
				/* 获取状态汇总 */
 			_page_home.getZtCharts();
 				/* 获取汇总汇总 */
			_page_home.getHzCharts()
		})
	</script>			
</body>
</html>